<template>
  <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal">
    <p v-for="(keys, index) in keyList" :key="index" ref="p">
      <i v-for="(key, i) in keys" :key="i" ref="row">
        <i v-if="key === 'top'" ref="tab" @click="changeIcon" @click.stop="clickKey" @touchend.stop="clickKey"
          class="tab-top icon-font"></i>
        <i v-else-if="key === 'del'" @click.stop="clickKey" @touchend.stop="clickKey"
          class="key-delete icon-long-arrow-left"></i>
        <i v-else-if="key === 'tab-blank'" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-blank icon-minus"></i>
        <i v-else-if="key === 'tab-keyboard'" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-keyboard icon-keyboard"></i>
        <!-- <i v-else-if="key === 'point'" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-point">·</i> -->
        <i v-else @click.stop="clickKey" @touchend.stop="clickKey">{{ key }}</i>
      </i>
    </p>
    <p v-show = "keyList != numList">
      <i @click.stop="clickKey" @touchend.stop="clickKey" class="tab-keyboard icon-keyboard"></i>
      <i @click.stop="clickKey" @touchend.stop="clickKey" class="tab-num">123</i>
      <i @click.stop="clickKey" @touchend.stop="clickKey" class="tab-blank icon-minus"></i>
      <i @click.stop="clickKey" @touchend.stop="clickKey" class="tab-symbol">符</i>
      <i @click.stop="clickKey" @touchend.stop="clickKey" class="tab-enter">&crarr;</i>
    </p>
    <p class="font">安全键盘</p>
  </div>
</template>

<script>
import clickoutside from './clickoutside'

export default {
  directives: { clickoutside },
  data() {
    return {
      keyList: [],
      status: 0, // 0 小写 1 大写 2 数字 3 符号
      lowercase: [
        ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
        ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
        ['top', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'del']
      ],
      uppercase: [
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        ['top', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del']
      ],
      numList: [
        ['1', '2', '3', 'del'],
        ['4', '5', '6', 'tab-blank'],
        ['7', '8', '9', 'top'],
        ['@', '0', '.', 'tab-keyboard']
      ],
      equip: !!navigator.userAgent.toLocaleLowerCase().match(/ipad|mobile/i)// 是否是移动设备
    }
  },
  props: {
    option: {
      type: Object
    }
  },
  computed: {
    showKeyboard() {
      return this.option.show
    }
  },

  mounted() {
    this.keyList = this.lowercase
  },

  methods: {
    changeIcon() {
      this.$refs.tab[0].style.color = this.status === 1 ? '#827f7f' : '#fff'
    },
    tabHandle({ value = '' }) {
      if (value.indexOf('tab-num') > -1) {
        this.status = 2
        this.keyList = this.numList
        this.$refs.p[1].style.width = '95%'
      } else if (value.indexOf('key-delete') > -1) {
        this.emitValue('delete')
      } else if (value.indexOf('tab-blank') > -1) {
        this.emitValue(' ')
      } else if (value.indexOf('tab-enter') > -1) {
        this.emitValue('\n')
      } else if (value.indexOf('tab-point') > -1) {
        this.emitValue('.')
      } else if (value.indexOf('tab-keyboard') > -1) {
        this.$emit('close', false)
      } else if (value.indexOf('tab-symbol') > -1) {
        this.status = 3
      } else if (value.indexOf('tab-top') > -1) {
        if (this.status === 0) {
          this.status = 1
          this.keyList = this.uppercase
        } else {
          this.status = 0
          this.keyList = this.lowercase
        }
      } else {

      }
    },

    clickKey(event) {
      if (event.type === 'click' && this.equip) return
      let value = event.srcElement.innerText
      value && value !== '符' && value !== '·' && value !== '123' ? this.emitValue(value) : this.tabHandle(event.srcElement.classList)
    },

    emitValue(key) {
      this.$emit('keyVal', key)
    },

    closeModal(e) {
      if (e.target !== this.option.sourceDom) {
        // this.showKeyboard = false
        this.$emit('close', false)
      }
    }
  }
}
</script>

<style scoped lang="scss" scope>
.font {
  font-size: .3rem;
  height: .8rem !important;
  display: flex;
  float: left;
}
.keyboard {
  width: 100%;
  margin: 0 auto;
  font-size: 1.7rem;
  border-radius: 2px;
  padding-top: 0.5rem;
  background-color: #e5e6e8;
  user-select: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  pointer-events: auto;

  p {
    width: 95%;
    margin: 0 auto;
    height: 2rem;
    margin-bottom: 0.5rem;
    display: flex;
    display: -webkit-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;

    i {
      display: block;
      margin: 0 1%;
      height: 2rem;
      line-height: 2rem;
      font-style: normal;
      font-size: 1rem;
      border-radius: .2rem;
      background-color: #fff;
      text-align: center;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
      -webkit-box-flex: 1;

      &:active {
        background-color: darken(#ccc, 10%);
      }
    }

    .tab-top {
      margin: 0 1%;
      background: #cccdd0;
      color: #fff;
      font-size: .9rem;
    }

    .key-delete {
      margin: 0 1%;
      color: #827f7f;
      background: #d7d7d8;
    }

    .tab-num {
      font-size: .8rem;
      background: #dedede;
      color: #5a5959;
    }

    .tab-blank {
      font-size: .6rem;
      padding: 0 .7rem;
      color: #5a5959;
    }

    .tab-symbol {
      font-size: .8rem;
    }

    .tab-enter {
      font-size: 1.5rem;
    }

    &:nth-child(2) {
      width: 88%;
    }
  }
}
</style>
